import React from 'react';
import {
    Table,
} from 'antd';
import axios from 'axios';
import intercept from '../../../utils/intercept';
import { config } from 'utils';
// import './OrderInfo.less'

export default class CustomOrderDetail extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            loading: false,
            data: []
        };
    }

    componentDidMount() {
        this.getOrderdetail();
    };

    getOrderdetail() {
        const token = sessionStorage.getItem("token");
        this.setState({ loading: true });
        const url = `${config.api}CustomLine/GetCustomOrderDetail?OrderId=${this.props.orderId}`;
        axios
            .get(url, { headers: { Authorization: 'Bearer ' + token } })
            .then((data) => {
                this.setState({ loading: false, data: data.data.orderList });
            })
            .catch(err => {
                intercept;
            })
    };

    render() {
        const statusstr = ['待支付', '已支付', '已取消', '已打印', '客服申请退款', '客服申请退款成功', '超时支付申请退款', '超时支付退款成功', '用户申请退款', '退款成功'];
        const column = [
            {
                title: '姓名',
                dataIndex: 'passengerName',
                width: 150
            }, {
                title: '身份证',
                dataIndex: 'passengerCardId',
                width: 150
            }, {
                title: '电话',
                dataIndex: 'passengerPhone',
                width: 150
            }
            , {
                title: '状态',
                dataIndex: 'ticketStatus',
                width: 150,
                render: (text, record) => {
                    return (
                        <span>{statusstr[record.ticketStatus]}</span>
                    )
                }
            }
        ];
        return (<Table
            columns={column}
            style={{ background: 'white' }}
            rowClassName={() => { return 'childtable' }}
            dataSource={this.state.data}
            bordered={true}
            pagination={false}
            size="small" />);
    }
}
